<div nz-row [nzGutter]="[16, 16]">
  @for (item of 8 | numberLoop; track $index) {
    <div nz-col [nzLg]="12" [nzMd]="12" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="12">
      <nz-card nzHoverable [nzActions]="[op1, op2, op3, op4]">
        <nz-card-meta [nzAvatar]="nzAvatar" [nzTitle]="'Alipay'">
          <ng-template #nzAvatar>
            <nz-avatar nzSize="small" [nzSrc]="'imgs/default_face.png'"></nz-avatar>
          </ng-template>
        </nz-card-meta>
        <div class="card-info">
          <div>
            <p nz-typography nzType="secondary">活跃用户</p>
            <p>
              12
              <span class="wan">万</span>
            </p>
          </div>
          <div>
            <p nz-typography nzType="secondary">新增用户</p>
            <p>{{ 1962 | number: '3.' }}</p>
          </div>
        </div>
      </nz-card>
    </div>
  }
</div>

<ng-template #op1>
  <i nz-icon nz-tooltip nzTooltipTitle="下载" nzType="download"></i>
</ng-template>
<ng-template #op2>
  <i nz-icon nz-tooltip nzTooltipTitle="编辑" nzType="edit"></i>
</ng-template>
<ng-template #op3>
  <i nz-icon nz-tooltip nzTooltipTitle="分享" nzType="share-alt"></i>
</ng-template>
<ng-template #op4>
  <i nz-dropdown nz-icon nzPlacement="bottomLeft" nzType="ellipsis" [nzDropdownMenu]="op4Menu"></i>
  <nz-dropdown-menu #op4Menu="nzDropdownMenu">
    <ul nz-menu>
      <li nz-menu-item>1st menu item</li>
      <li nz-menu-item>2st menu item</li>
      <li nz-menu-item>3st menu item</li>
    </ul>
  </nz-dropdown-menu>
</ng-template>
